<script setup>
import { ref, watch } from 'vue'
import * as echarts from 'echarts'
import { useAirStore } from '@/stores'
import { storeToRefs } from 'pinia'

const airStore = useAirStore()
const { operationData } = storeToRefs(airStore)
const timebar = ref('年')
const timeList = ref(['年', '月'])
const optionData01 = {
  tooltip: {
    trigger: 'axis',
    borderColor: '#0F2638',
    backgroundColor: '#0F2638DB',
    textStyle: {
      color: '#fff',
      fontSize: 14,
      marginLeft: '-20px'
    },
    formatter: function (params) {
      return `<div>${params[0].name}${timebar.value} ${params[0].data} h</div>`
    }
  },
  grid: {
    left: '2%',
    right: '3%',
    bottom: '2%',
    top: '34%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      boundaryGap: false,
      data: ['1月', '2月', '3月', '4月', '5月'],
      axisLabel: {
        interval: 0,
        textStyle: {
          color: 'rgba(255,255,255,.7)'
        }
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.2)'
        }
      },
      axisTick: {
        show: false
      }
    }
  ],
  yAxis: [
    {
      type: 'value',
      name: 'h',
      splitNumber: 2,
      nameTextStyle: {
        padding: [0, 30, 0, 0],
        color: '#85B9CB'
      },
      axisLabel: {
        textStyle: {
          color: '#85B9CB'
        },
        formatter: '{value}'
      },
      axisLine: {
        show: false
      },
      splitLine: {
        show: true,
        lineStyle: {
          type: 'dashed',
          color: 'rgba(255, 255, 255, 0.2)'
        }
      }, //设置网格
      axisTick: {
        show: false
      }
    }
  ],
  series: [
    {
      type: 'line',
      smooth: true,
      showSymbol: false,
      lineStyle: {
        color: '#3CE4E8'
      },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgba(60, 228, 232, 0.5)'
          },
          {
            offset: 1,
            color: 'rgba(60, 228, 232, 0)'
          }
        ])
      },
      data: [7, 14, 17, 9, 14]
    }
  ]
}
const option01 = ref(optionData01)
const enterpriseNum = ref(0)

const setData = (val) => {
  enterpriseNum.value = val?.duration
  option01.value.xAxis[0].data = []
  option01.value.series[0].data = []
  Object.keys(val?.operationDurationForYear).forEach((item) => {
    option01.value.xAxis[0].data.push(item)
  })
  Object.values(val?.operationDurationForYear).forEach((item) => {
    option01.value.series[0].data.push(item)
  })
}

// 切换单位
const changeTimeBar = (val) => {
  timebar.value = val
  option01.value.xAxis[0].data = []
  option01.value.series[0].data = []
  if (val === '年') {
    Object.keys(operationData.value.operationDurationForYear).forEach((item) => {
      option01.value.xAxis[0].data.push(item)
    })
    Object.values(operationData.value.operationDurationForYear).forEach((item) => {
      option01.value.series[0].data.push(item)
    })
  } else if (val === '月') {
    Object.keys(operationData.value.operationDurationForMonth).forEach((item) => {
      option01.value.xAxis[0].data.push(item)
    })
    Object.values(operationData.value.operationDurationForMonth).forEach((item) => {
      option01.value.series[0].data.push(item)
    })
  }
}

watch(operationData, (newVal) => {
  setData(newVal)
})
</script>
<template>
  <div class="card">
    <div class="top">
      <div class="enterprise-num">
        <span>运营架次总时长</span>
        <i>/h</i>
      </div>
      <div class="num">
        <span><NumberAnimate :count="enterpriseNum" /></span>
      </div>
    </div>
    <div class="timebar">
      <p
        v-for="(item, index) in timeList"
        :key="index"
        :class="{ active: timebar == item }"
        @click="changeTimeBar(item)"
      >
        {{ item }}
      </p>
    </div>
    <div class="chart">
      <Charts :option="option01" container="8" />
    </div>
  </div>
</template>
<style scoped lang="scss">
.card {
  padding: 10px;
  .top {
    background: url('@img/management/fly-situation-bg.png');
    background-size: 100% 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .enterprise-num {
      display: flex;
      flex-direction: column;
      margin-left: 26px;
      i {
        color: #2f9cff;
        font-size: 14px;
        margin-left: 3px;
        vertical-align: middle;
        font-style: normal;
      }
    }
    .num {
      flex: 1;
      text-align: center;
      margin-left: 40px;
    }
    &:deep(.odometer-numbers) {
      span {
        font-family: DINAlternate;
        font-size: 28px;
        line-height: 28px;
        color: #ffffff;
        letter-spacing: 5px;
        background: linear-gradient(to bottom, #ffffff 0%, #00d5ff 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }
  }
  .timebar {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 10px;

    p {
      width: 60px;
      height: 37px;
      text-align: center;
      line-height: 37px;
      margin-left: 10px;
      background: url('@img/overview/timebar.png');
      background-size: 100% 100%;
      color: #a7b1bb;
      cursor: pointer;

      &.active {
        background: url('@img/overview/timebar_active.png');
        background-size: 100% 100%;
        color: #fff;
      }
    }
  }
  .chart {
    width: 100%;
    height: 140px;
    margin-top: -34px;
  }
}
</style>
